<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('my.smrz')" :leftIcon="true"></navbar>
		
		<view class="form-container">
			<!-- 证件类型 -->
			<view class="form-item">
				<view class="form-label">{{ t('realName.zjlx') }}</view>
				<view class="form-input-container" @click="showIdTypeSelector = true">
					<view class="form-input">
						<image src="/static/icon/zhenjian.svg" class="input-icon"></image>
						<text>{{ selectedIdType }}</text>
					</view>
					<image src="/static/icon/xiala2.svg" class="arrow-icon"></image>
				</view>
			</view>
			
			<!-- 真实姓名 -->
			<view class="form-item">
				<view class="form-label">{{ t('realName.zsxm') }}</view>
				<view class="form-input-container">
					<view class="form-input">
						<image src="/static/icon/xingming.svg" class="input-icon"></image>
						<input type="text" :placeholder="t('realName.qsrzsxm')" v-model="realName" />
					</view>
				</view>
			</view>
			
			<!-- 证件号码 -->
			<view class="form-item">
				<view class="form-label">{{ t('realName.zjhm') }}</view>
				<view class="form-input-container">
					<view class="form-input">
						<image src="/static/icon/haoma.svg" class="input-icon"></image>
						<input type="text" :placeholder="t('realName.qsrzjhm')" v-model="idNumber" />
					</view>
				</view>
			</view>
			
			<!-- 证件照片 -->
			<view class="form-item">
				<view class="form-label">{{ t('realName.zjzp') }}</view>
				<view class="id-photos">
					<view class="photo-upload" @click="chooseImage('front')">
						<image v-if="frontImage" :src="frontImage" mode="aspectFill" class="uploaded-image"></image>
						<view v-else class="upload-placeholder">
							<text class="plus">+</text>
						</view>
					</view>
					<view class="photo-upload" @click="chooseImage('back')">
						<image v-if="backImage" :src="backImage" mode="aspectFill" class="uploaded-image"></image>
						<view v-else class="upload-placeholder">
							<text class="plus">+</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 确认按钮 -->
		<view class="confirm-btn" @click="submitVerification">
			{{ t('common.confirm') }}
		</view>
		
		<!-- 证件类型选择器弹窗 -->
		<view class="id-type-selector" v-if="showIdTypeSelector">
			<view class="selector-mask" @click="showIdTypeSelector = false"></view>
			<view class="selector-content">
				<view class="selector-item" @click="selectIdType('身份证')">
					<view class="selector-item-content">
						<image src="/static/icon/zhenjian.svg" class="selector-icon"></image>
						<text>{{ t('realName.sfz') }}</text>
					</view>
					<image v-if="selectedIdType === t('realName.sfz')" src="/static/icon/checked-icon.svg" class="check-icon"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useI18n } from 'vue-i18n';
	import { ref } from 'vue';
	const { t, locale } = useI18n();
	
	// 表单数据
	const selectedIdType = ref(t('realName.sfz')); // 默认选择身份证
	const realName = ref('');
	const idNumber = ref('');
	const frontImage = ref('');
	const backImage = ref('');
	const showIdTypeSelector = ref(false);
	
	// 选择证件类型
	function selectIdType(type) {
		selectedIdType.value = t('realName.sfz');
		showIdTypeSelector.value = false;
	}
	
	// 选择图片
	function chooseImage(type) {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				if (type === 'front') {
					frontImage.value = res.tempFilePaths[0];
				} else {
					backImage.value = res.tempFilePaths[0];
				}
			}
		});
	}
	
	// 提交验证
	function submitVerification() {
		if (!realName.value) {
			uni.showToast({
				title: t('realName.qsrzsxm'),
				icon: 'none'
			});
			return;
		}
		
		if (!idNumber.value) {
			uni.showToast({
				title: t('realName.qsrzjhm'),
				icon: 'none'
			});
			return;
		}
		
		if (!frontImage.value || !backImage.value) {
			uni.showToast({
				title: t('realName.qscjzp'),
				icon: 'none'
			});
			return;
		}
		
		// 这里添加实际的提交逻辑
		uni.showToast({
			title: t('realName.tjcg'),
			icon: 'success'
		});
	}
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding-top: 180rpx;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}
	
	.form-container {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		margin: 0 30rpx;
	}
	
	.form-item {
		margin-bottom: 40rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.form-label {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		margin-bottom: 20rpx;
	}
	
	.form-input-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1px solid #E5E7EB;
		border-radius: 12rpx;
		padding: 0 20rpx;
		height: 100rpx;
	}
	
	.form-input {
		display: flex;
		align-items: center;
		flex: 1;
		height: 100%;
		
		input {
			flex: 1;
			height: 100%;
			font-size: 28rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #333333;
		}
	}
	
	.input-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	
	.arrow-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.id-photos {
		display: flex;
		justify-content: space-between;
	}
	
	.photo-upload {
		width: 48%;
		height: 360rpx;
		border: 1px dashed #E5E7EB;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	
	.upload-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	
	.plus {
		font-size: 80rpx;
		color: #CCCCCC;
	}
	
	.uploaded-image {
		width: 100%;
		height: 100%;
	}
	
	.confirm-btn {
		margin: 60rpx 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: linear-gradient(90deg, #00C6FB 0%, #005BEA 100%);
		border-radius: 50rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
	}
	
	.id-type-selector {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}
	
	.selector-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.selector-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 30rpx;
	}
	
	.selector-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1px solid #F5F6FA;
	}
	
	.selector-item-content {
		display: flex;
		align-items: center;
	}
	
	.selector-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	
	.check-icon {
		width: 40rpx;
		height: 40rpx;
	}
</style>